<template>
  <a-table :columns="columns" :data-source="data" class="my-table"
  :pagination="{current: 1, total: 50, pageSize: 10}"
  :scroll="{x: 1500, y: true}"
  >
  <!-- scroll.x 看业务情况写， scroll.y 写true 就可以，不是特别秣 -->
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          Name
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag v-for="tag in record.tags" :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
            <down-outlined />
          </a>
        </span>
      </template>
    </template>
  </a-table>
  <div class="my-table" style="height: 25px;">
    <div class="ant-table-container" style="height: 25px;">
      src\views\table\first-table.vue
    </div>
  </div>
</template>
<script setup lang="ts">
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';

const current = ref(1)
const columns = [
  {
    name: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
  },
  {
    title: 'Action',
    key: 'action',
  }
];


const data = [
{
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
];
</script>
<style lang="scss" scoped>
/*
 对于子组件样式的覆盖
 1. 如果是全局样式， 不需要使用 :deep, 只要选择器写的对就可以。
 2. 如果是scoped , 需要使用 :deep, 不使用 :deep ,那么样式仅仅会对本组件样式起作用,
 3. 对每个组件有一个唯一的识别号，组件中的每个dom 上都会有这个识别号属性， 子组件中的dom不会有，

        如果不写 :deep， 这个识别号就写在选择器最后，那么就不能覆盖子组件样式了，
        比如 .my-table .ant-table-container,
        真正在页面上的生成的是  .my-table .ant-table-container[data-v-9011d17a]， 因为子组件上没有[data-v-9011d17a] ,所以不会影响到子组件样式

        使用 :deep 那么这个号会写在 :deep 之前的那个选择器了，
        比如 .my-table :deep(.ant-table-container), 
        真正在页面上生成的是 .my-table[data-v-9011d17a] .ant-table-container, 这样就可以影响到子组件样式

  4. 全局样式中 使用 :deep() 是无论如何都没有用的, 他不会被转成类似 scoped 那样带有唯一识别号的选择器，
     比如 .my-table :deep(.ant-table-container) ， 在页面上依然是 .my-table :deep(.ant-table-container)， 这个选择器不会选中任意dom
*/
@import '@/css/full-height-table.scss';
@import '@/css/full-height-table-deep.scss';

</style>

<style lang="scss">
.my-table {
    :deep(.ant-table-container){
        height: calc(100vh - 300px);
        overflow: auto;
        color: aqua;
        div.ant-table-body{
            height: calc(100vh - 360px);
            overflow: auto;
        }
    }
}
</style>